<template>
  <div>
    <div class="detail_box">
      <div class="operate_box">
        <div class="item_box" >
          <div class="operate_item">
            <label>操作人：</label>
            <el-input type="text" clearable placeholder="请输入操作人名称" v-model="keyword"></el-input>
          </div>
          <div class="operate_item">
            <label>时间：</label>
            <el-date-picker
              v-model="proDate"
              type="datetimerange"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </div>
          <div class="operate_item">
            <span class="operate_btn search_btn" @click="getTableInfo(1)">查询</span>
            <span class="operate_btn reset_btn" @click="resetTable">重置</span>
          </div>
        </div>
      </div>
      <div class="table_box">
<!--        <el-table-->
<!--          border-->
<!--          v-loading="loading"-->
<!--          :header-cell-style="tableHeader"-->
<!--          ref="multipleTable"-->
<!--          :data="tableInfo"-->
<!--          tooltip-effect="dark"-->
<!--          style="width: 100%;">-->
<!--          <el-table-column-->
<!--            width="120"-->
<!--            prop="id"-->
<!--            label="ID">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="createTime"-->
<!--            sortable-->
<!--            label="操作时间">-->
<!--            <template slot-scope="scope">-->
<!--              <p class="content">{{formatDate(scope.row.createTime)}}</p>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            label="事件名称">-->
<!--            <template slot-scope="scope">-->
<!--              <p class="content">{{scope.row.eventName?scope.row.eventName:'——'}}</p>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            label="事件备注">-->
<!--            <template slot-scope="scope">-->
<!--              <p class="content">{{scope.row.eventMemo?scope.row.eventMemo:'——'}}</p>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            label="操作人">-->
<!--            <template slot-scope="scope">-->
<!--              <p class="content">{{scope.row.username?scope.row.username:'——'}}</p>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            label="IP">-->
<!--            <template slot-scope="scope">-->
<!--              <p class="content">{{scope.row.ip?scope.row.ip:'——'}}</p>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            label="请求地址">-->
<!--            <template slot-scope="scope">-->
<!--              <p class="content">{{scope.row.url?scope.row.url:'——'}}</p>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            width="300"-->
<!--            label="请求参数">-->
<!--            <template slot-scope="scope">-->
<!--              <p class="content">{{scope.row.params?scope.row.params:'——'}}</p>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
        <tableTemplate
          :table-header="tHeader"
          :table-info="tableInfo"
          :loading="loading"
        />
      </div>
<!--      <div class="record_page">-->
<!--        <span class="page_count">共<i>{{totals}}</i>条</span>-->
<!--        <el-pagination-->
<!--          @size-change="sizeChange"-->
<!--          @current-change="getTableInfo"-->
<!--          background-->
<!--          :current-page="currentPage"-->
<!--          :page-sizes="[15, 20, 30, 40]"-->
<!--          :page-size="pageSize"-->
<!--          layout="prev, pager, next, sizes,jumper"-->
<!--          :total="totals">-->
<!--        </el-pagination>-->
<!--      </div>-->
      <div class="page_btn" v-if="tableInfo.length>0">
        <span @click="setPage(-1)" :class="{'no_page':currentPage===1}">上一页</span>
        <i>{{currentPage}}</i>
        <span @click="setPage(1)" :class="{'no_page':tableInfo.length<10}">下一页</span>
      </div>
    </div>
  </div>
</template>

<script>
import commons from "@/utils/common";
import {getBtn} from "../../../utils/btnAuth";
import {listData} from "@/api/sys/log";
import tableTemplate from '../../../components/tableTemplate/index.vue'

export default {
    components:{
      tableTemplate
    },
    data() {
      return {
        tHeader:[
          {
            prop:'id',
            label:'ID',
            width: 80,
            fixed:false,
            template:''
          }, {
            prop:'createTime',
            label:'创建时间',
            width: 160,
            fixed:false,
            template:'time'
          },
          {
            prop:'eventName',
            label:'事件名称',
            width: 0,
            fixed:false,
            template:''
          },
          {
            prop:'eventMemo',
            label:'事件备注',
            width: 0,
            fixed:false,
            template:''
          },{
            prop:'username',
            label:'操作人',
            width: 0,
            fixed:false,
            template:''
          },{
            prop:'ip',
            label:'IP',
            width: 0,
            fixed:false,
            template:''
          },{
            prop:'url',
            label:'请求地址',
            width: 0,
            fixed:false,
            template:''
          },{
            prop:'params',
            label:'请求参数',
            width: 300,
            fixed:false,
            template:''
          }
        ],
        keyword: '',
        proDate:'',
        tableInfo: [],
        currentPage: 1,
        pageSize: 10,
        totals: 0,
        loading: false,
        btn:getBtn()
      }
    },
    mounted() {
      if (this.btn.query){
        this.getTableInfo(1);
      }
    },
    methods: {
      setPage(type){
        let oldPage = this.currentPage;
        if (type===1){
          this.currentPage = this.currentPage + 1;
        }else{
          this.currentPage = this.currentPage>1?this.currentPage -1 : 1;
        }
        if (oldPage!==this.currentPage){
          this.getTableInfo(this.currentPage);
        }
      },

      getTableInfo(page) {
        let that = this;
        that.loading = true;
        that.currentPage = page;
        let queryParams = {
          limit:that.pageSize,
          page:page,
          name:that.keyword,
          type:'',
          beginDate:that.proDate?that.proDate[0]:'',
          endDate:that.proDate?that.proDate[1]:'',
        }
        listData(queryParams).then(res => {
          that.tableInfo = res?res.list:[];
          that.totals = res?res.count:0;
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      },

      resetTable() {
        this.keyword = '';
        this.proDate = '';
        this.pageSize = 15;
        this.getTableInfo(1)
      },
      formatDate(time){
        return commons.formatTime(time);
      },

      sizeChange(val){
        this.pageSize =val;
        this.getTableInfo(1)
      },
      // 设置table标题居中
      tableHeader({row, column, rowIndex, columnIndex}) {
        return 'background:#F0F2F5;color:#111;padding:10px 0;font-size:14px;font-weight:600'
      },
    }
  }
</script>

<style scoped>
.page_btn {
  display: flex;
  justify-content: center;
}
.page_btn span{
  background: #6687f9;
  color: #fff;
  display: block;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.page_btn .no_page {
  background: #cecece;
}
.page_btn i{
  color: #bbb;
  display: block;
  padding: 8px 15px;
  border-radius: 4px;
  border: 1px solid #d7d7d7;
  margin:0 20px;
}
</style>
